<template>
  <el-dialog v-loading="loading" left title="跳转小程序URL生成" width="800px" :visible.sync="visible" @cancel="close">
    <el-row style="height: 300px">
      <el-col :span="14">
        <el-form ref="form" :rules="rules" size="middle" :model="form" label-width="100px" label-position="left">
          <el-form-item label="app id" prop="appId">
            <el-input v-model="form.appId" readonly />
          </el-form-item>

          <el-form-item label="类型" prop="isExpire">
            <el-select v-model="form.isExpire" style="width: 344px" placeholder="请选择">
              <el-option label="永久有效" :value="0" />
              <el-option label="到期失效" :value="1" />
            </el-select>
          </el-form-item>

          <el-form-item v-if="form.isExpire === 1" label="失效类型" prop="expireType">
            <el-select v-model="form.expireType" style="width: 344px" placeholder="请选择">
              <el-option label="失效时间" :value="0" />
              <el-option label="失效间隔天数" :value="1" />
            </el-select>
          </el-form-item>

          <el-form-item v-if="form.isExpire === 1 && form.expireType === 1" label="间隔天数" prop="expireInterval">
            <el-input v-model="form.expireInterval" type="number" placeholder="在该间隔时间到达前有效。最长间隔天数为365天" />
          </el-form-item>

          <el-form-item v-if="form.isExpire === 1 && form.expireType === 0" label="失效时间" prop="expireTime">
            <el-date-picker v-model="form.expireTime" style="width: 344px" format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择失效时间" />
          </el-form-item>

          <el-form-item label="路径" prop="path">
            <el-input v-model="form.path" maxlength="200" placeholder="小程序页面路径, 不含参数" />
          </el-form-item>

          <el-form-item prop="query" label="路径参数">
            <el-input
              v-model="form.query"
              maxlength="1024"
              placeholder="路径参数(不含?号), 只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~%"
            />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="10" flex>
        <div v-if="url" style="text-align: center; padding-top: 100px">
          <div style="margin-bottom: 30px; font-size: 18px">输出结果</div>
          <el-input type="textarea" style="width:280px; min-height: 100px; color: #999; font-size: 16px" :value="url" />
        </div>
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">立即生成</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { genWxappUrl } from '@/api/wxapp'
import dayjs from 'dayjs'

export default {
  name: 'GenUrlDialog',
  data() {
    return {
      loading: false,
      visible: false,
      appId: '',
      reject: null,
      resolve: null,
      url: '',
      form: {
        appId: '',
        expireType: 0,
        isExpire: 0,
        path: '',
        query: '',
        expireInterval: 1,
        expireTime: ''
      },
      rules: {
        path: [{
          required: true,
          message: '请输入小程序页面路径',
          trigger: 'blur'
        }],
        expireTime: [{
          required: true,
          message: '请输入失效时间',
          trigger: 'blur'
        }],
        expireInterval: [{
          required: true,
          message: '请输入失效时间间隔',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    show(appId) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true

        this.url = ''
        this.form.appId = appId
        this.form.path = ''
        this.form.query = ''
        this.form.expireType = 0
        this.form.isExpire = 0
        this.form.expireInterval = 1
        this.form.expireTime = ''
        this.$refs.form.resetFields()
      })
    },
    close() {
      this.visible = false
      this.resolve = null
      this.reject = null
    },
    handleSave() {
      if (this.loading) {
        return
      }
      this.url = '生成中'
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            appId: this.form.appId,
            path: this.form.path,
            query: this.form.query,
            isExpire: this.form.isExpire,
            expireType: this.form.expireType,
            expireInterval: this.form.expireInterval
          }
          if (this.form.isExpire === 1 && this.form.expireTime) {
            data.expireTime = dayjs(this.form.expireTime).format('YYYY-MM-DD HH:mm:ss')
          }
          this.qrcode = ''
          this.loading = true
          genWxappUrl(data).then(res => {
            this.loading = false
            if (res.code === 0) {
              this.url = res.data
            }
          }).catch(e => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
